<template>
    <view class="container">
        <view class="item">
            <view class="title">新消息通知</view>
            <fui-switch :checked="obj.newMsg" @change="val => changeSwitch(val, { label: '新消息通知', key: 'newMsg' },)" :color="switchColor"></fui-switch>
        </view>
        <view class="hint-box">
            <view class="title">通知分类</view>
            <view>关闭后将不会收到对应的系统通知，只会在APP内出现红点提醒</view>
        </view>
        <view class="item" v-for="(item, index) in items" :key="index">
            <view class="title">{{ item.label }}</view>
            <fui-switch :checked="obj[item.key]" @change="val => changeSwitch(val, item)" :color="switchColor"></fui-switch>
        </view>
    </view>
</template>

<script setup lang="ts">
import { editMsgNotifyConfig, getMsgNotifyConfig } from '@/api/user'
import { reactive } from 'vue'
import FuiSwitch from '@/components/firstui/fui-switch/fui-switch.vue'

const switchColor = '#376af7'

const obj = reactive({
    id: null,
    uid: null,
    newMsg: true,
    fans: true,
    comment: true,
    like: true,
    collection: true,
    order: true,
})

const items = [
    { label: '粉丝', key: 'fans' },
    { label: '评论', key: 'comment' },
    { label: '点赞', key: 'like' },
    { label: '收藏', key: 'collection' },
]

const getConfig = () => {
    getMsgNotifyConfig().then(({ ok, data }) => {
        if (ok) {
            Object.assign(obj, data)
            console.log('obj', obj)
        }
    })
}

onShow(() => {
    console.log('onShow')
    getConfig()
})

const changeSwitch = (val, item) => {
    console.log('changeSwitch', val.detail.value, item)
    obj[item.key] = val.detail.value
    editMsgNotifyConfig(obj).then((res) => {
        if (res.ok) {
            getConfig()
        }
    })
}
</script>

<style scoped lang="scss">
.container {
    padding: 46rpx;

    .title {
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: normal;
        line-height: 34rpx;
        letter-spacing: 0px;
        color: #333333;
    }

    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 44rpx;
    }

    .hint-box {
        margin-top: 50rpx;
        margin-bottom: 44rpx;

        & > view:last-child {
            font-family: PingFang SC;
            font-size: 22rpx;
            font-weight: normal;
            line-height: 26px;
            letter-spacing: 0px;
            color: #999999;
        }
    }
}
</style>
